<template>
  <div style="width: 100%; height: 100%; position: relative;" v-show="!!src">
    <video
      ref="MyPlayer"
      preload="auto"
      muted
      class="video-js vjs-default-skin"
      style="width: 100%; height: 100%; object-fit: fill"
    ></video>
    <div class="replay_real">
      <span>Live</span>
      <img src="@/assets/image/index/ico_live.png" alt="">
    </div>
  </div>
  <div v-show="!src" class="plug_flow" style="width: 100%; height: 100%; position: relative;">
    <img src="@/assets/image/index/cio_no_signal.png" alt="">
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import videojs from 'video.js'

// 组件中使用，接收传参的
let propsData = defineProps({
  src: {
    type: String,
    default: '',
    required: true
  }
})

const MyPlayer = ref(null);
const player = ref(null);

// watch(() => propsData.src, (val) => {
//   getVideo(val);
// })
onMounted(() => {
  setTimeout(() => {
    nextTick(() => {
      getVideo(propsData.src);
    })
  }, 500);
})

function getVideo(src) {
  if(!src) return;
  let type;
  if (src.indexOf('mp4') > -1) {
    type = 'video/mp4'
  }else{
    type = 'application/x-mpegURL' // m3u8 类型
  }
  player.value = videojs(MyPlayer.value, {
    autoplay: 'muted', // 自动静音播放
    controls: true, // 显示控制器
    // aspectRatio: '3:4',
    loop: true,
    disablePictureInPicture: true, // 禁用画中画功能
    sources: [
      {
        src: src,
        type
      },
    ],
  }, () => {
    // onPlayerReady
    MyPlayer.value.play();
  })
}

function disposeVideo(){
  if (player.value) {
    player.value.dispose()
  }
}

defineExpose({
  disposeVideo
});

</script>

<style scoped lang="less">
.replay_real{
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  font-size: 12px;
  background-color: rgba(252, 90, 165, 0.5);
  border-radius: 99999px;
  height: 24px;
  padding: 0 10px;
  color: #ffffff;
  animation: dodge 3s infinite;
  @keyframes dodge{
    0%   { opacity: 1; }	
    50%  { opacity: 0.25; }	
    100% { opacity: 1; }
  }
  img{
    width: 20px;
    height: 20px;
    margin-left: 6px;
  }
}
</style>